<template>
	<view>
		<view class="bg" @click="handleHideLogin" v-show="isShow"></view>
		<view class="login-wrap" :class="[isShow?'up':'']">
			<view>
				<view class="title">手机号登录</view>
				<view class="item">
					<input type="number" placeholder="请输入手机号" v-model="login.phone">
				</view>
				<view class="item">
					<input type="number" placeholder="请输入验证码" v-model="login.code">
					<view class="code" @click="getCode" v-if="!isGetCode">获取验证码</view>
					<view class="code" style="background:#dcdcdc;padding: 8rpx 12rpx;border-radius: 8rpx;" v-else>已获取</view>
				</view>
				<view class="tip">
					已阅读并同意 <text>[边界课堂云-演示系统付费用户协议]</text>
				</view>
				<view class="btn" @click="submit">登录</view>
			</view>
		</view>
	</view>
</template>
<script>
	import {
		login,
		getCode
	} from '@/api/product';
	export default {
		data() {
			return {
				isShow: false,
				isGetCode: false,
				login: {
					phone: '',
					code: ''
				}
			}
		},
		methods: {
			handleShowLogin() {
				this.isShow = true
			},
			handleHideLogin() {
				this.isShow = false
			},
			async getCode() {
				if (this.login.phone == '' || this.login.phone.length != 11) {
					uni.showToast({
						icon: 'none',
						title: '请输入正确的手机号'
					})
					return false
				}
				try {
					const res = await this.$http.post(`${getCode}`, {
						phone: this.login.phone
					}, {
						header: {
							'Content-Type': 'application/x-www-form-urlencoded',
						},
					})
					this.$mHelper.toast(`发送成功`);
					this.isGetCode = true
				} catch(err) {
					this.$mHelper.toast(`请求过多，先休息一下吧`);
				}
			},
			async submit() {
				if (this.login.phone == '' || this.login.phone.length != 11) {
					uni.showToast({
						icon: 'none',
						title: '请输入正确的手机号'
					})
					return false
				}
				if (this.login.code == '') {
					uni.showToast({
						icon: 'none',
						title: '请输入验证码'
					})
					return false
				}
				const res = await this.$http.post(`${login}`, this.login, {
					header: {
						'Content-Type': 'application/x-www-form-urlencoded',
					},
				})
				this.$store.commit('login', res.data.userinfo)
				this.$emit('loginOk', res.data.userinfo)
			}
		},
		watch: {
			isShow(val) {
				if (val) {
					uni.hideTabBar()
				} else {
					uni.showTabBar()
				}
			}
		}
	}
</script>
<style lang="scss" scoped>
	.bg {
		position: fixed;
		background: rgba(0, 0, 0, .5);
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		z-index: 999;
	}

	.login-wrap {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background: $color-white;
		transform: translate3d(0, 120%, 0);
		-webkit-transform: translate3d(0, 120%, 0);
		transition: all .5s ease;
		z-index: 1000;

		&>view {
			width: 80%;
			margin: $spacing-base auto;

			.title {
				text-align: center;
				font-size: $font-lg;
				font-weight: bold;
			}

			.item {
				display: flex;
				border-bottom: 1upx solid $border-color-dark;
				height: 100upx;
				align-items: center;

				input {
					flex: 1;
					font-size: $font-base;
				}

				.code {
					color: $base-color;
				}
			}

			.tip {
				font-size: $font-sm;
				margin: $spacing-base 0 $spacing-lg 0;

				text {
					color: $base-color;
				}
			}

			.btn {
				background: #f9e067;
				text-align: center;
				line-height: 100upx;
				font-size: $font-lg;
				border-radius: $border-radius-base;
				font-weight: bold;
			}
		}
	}

	.up {
		transform: translate3d(0, 0, 0);
		-webkit-transform: translate3d(0, 0, 0);
	}
</style>
